<script setup>
	import { computed, ref, watch } from 'vue'
	import { useRoute, useRouter } from 'vue-router'
	import { getDetailInfos } from '@/service/index'

	import DetailSwipe from './components/detail-01-swipe.vue'
	import DetailInfos from './components/detail-02-infos.vue'
	import DetailFacility from './components/detail-03-facility.vue'
	import DetailLandlord from './components/detail-04-landlord.vue'
	import DetailComment from './components/detail-05-comment.vue'
	import DetailNotice from './components/detail-06-notice.vue'
	import DetailMap from './components/detail-07-map.vue'
	import DetailTab from './components/detail-08-tab.vue'
	import useScroll from '@/hooks/useScroll.js'

	const route = useRoute()
	const router = useRouter()
	const houseId = route.params.id

	// 发送网络请求
	const detailInfos = ref({})
	const mainPart = computed(() => {
		return detailInfos.value.mainPart
	})
	getDetailInfos(houseId).then((res) => {
		detailInfos.value = res.data
	})

	// 返回
	const onClickLeft = () => {
		router.back()
	}

	// tabControll点击
	const detailRef = ref()
	const { scrollTop } = useScroll(detailRef)
	const isTab = computed(() => {
		return scrollTop.value > 300
	})
	const sectionEls = ref([])
	const getSectionRef = (value) => {
		if (value) sectionEls.value.push(value.$el)
	}
	let isClick = false
	let currentDistance = -1
	// 自定义组件
	const tabItemClick = (index) => {
		let distance = sectionEls.value[index].offsetTop
		if (index !== 0) {
			distance = distance - 44
		}

		isClick = true
		currentDistance = distance

		detailRef.value.scrollTo({
			top: distance,
			behavior: 'smooth',
		})
	}

	// 页面滚动时匹配对应的 tabControll 的 index
	const tabControllIndex = ref()
	watch(scrollTop, (newValue) => {
		// 如果是点击的话就停止滚动匹配
		if (newValue === currentDistance) {
			isClick = false
		}
		if (isClick) return
		// 1.拿到所以得 offsetTop
		const els = Object.values(sectionEls.value)
		const values = els.map((el) => el.offsetTop)

		// 2.根据 newValue 去匹配想要的索引
		let index = values.length - 1
		for (let i = 0; i < values.length; i++) {
			if (values[i] > newValue + 44) {
				index = i - 1
				break
			}
		}
		tabControllIndex.value = index
	})
</script>

<template>
	<div
		class="detail top-page"
		ref="detailRef">
		<div class="nav-bar">
			<van-nav-bar
				v-if="!isTab"
				class="nav"
				title="房屋详情"
				left-text="旅途"
				left-arrow
				@click-left="onClickLeft" />
			<detail-tab
				v-else
				class="tabs"
				@tab-item-click="tabItemClick"
				:tab-controll-index="tabControllIndex" />
		</div>
		<div
			class="main"
			v-if="mainPart"
			v-memo="[mainPart]">
			<detail-swipe :swipe-data="mainPart.topModule.housePicture.housePics" />
			<detail-infos
				:ref="getSectionRef"
				:top-infos="mainPart.topModule" />
			<detail-facility :ref="getSectionRef" />
			<detail-landlord :ref="getSectionRef" />
			<detail-comment :ref="getSectionRef" />
			<detail-notice :ref="getSectionRef" />
			<detail-map
				:ref="getSectionRef"
				:position="mainPart.dynamicModule.positionModule" />
		</div>
	</div>
</template>

<style lang="scss" scoped>
	.detail {
		.nav,
		.tabs {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 999;
		}
		.main {
			margin-top: 46px;
		}
	}
</style>
